<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/css/plugins/dataTables/css/jquery.dataTables.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
<style> 
    #mydataTable{  
	   width: 100% !important;
	}  
	td,th{font-size:16px !important}
		

</style>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="ibox-content">
              <div class="panel-body">
<%--                      <div class="col-sm-8 s_title">
                                     当前已选择<span id="count" class="text-navy" style="font-size:22px;">0</span>名员工，请配置相关角色权限
                      </div>--%>
                        <div class="col-sm-8 s_title"></div>
                        <div class="col-sm-4">
                                <div class="input-group">
                                    <input id="searchRoleValue" type="text" placeholder="请填写角色名称" class="input form-control">
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn btn-primary" onclick="searchRole();" > <i class="fa fa-search"></i> 搜索</button>
                                    </span>
                                </div>
                        </div>
              </div>
             
        </div>
        <div id="roleTable" class="ibox-content">
            <table class="display  table-striped table-bordered table-hover" id="mydataTable">
                <thead>
                    <tr>
                       <td>
                          <div class="checkbox i-checks"><label class="select_all"><input  type="checkbox" ></label></div>
                       </td>
                       <th>角色</th>
                       <th>角色描述</th>
                    </tr>
                </thead>
                <tbody>
                   
                </tbody>
            </table>
        </div>
        
       <div class="modal-footer" style="text-align:center;border-top:none;">
             <button type="button" class="btn btn-outline btn-primary" data-dismiss="modal">取消</button>
             <button type="button" class="btn btn-primary k_verify" onclick="selectRoleOption();">确定</button>
       </div>
    </div>
    <script type="text/javascript" src="<%=path%>/hplus/js/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
    var idsMap=new Map();
    var idsList=new Array();
    
    $('.select_all').on('ifChecked', function(event){
    	$(".childCheckbox").attr("checked","checked"); 
		$(".childCheckbox").parent().addClass("checked");
		idsList.length=0;
		$('.childCheckbox').each(function(i, d){
			var id=$(this).val();
			
			idsMap.set(id,id);
		})
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
		//$("#count").text(idsList.length);
    });
    
    $('.select_all').on('ifUnchecked', function(event){
    	$(".childCheckbox").removeAttr("checked","checked"); 
		$(".childCheckbox").parent().removeClass("checked");
		idsList.length=0;
		$('.childCheckbox').each(function(i, d){
			var id=$(this).val();
			idsMap.delete(id);
		})
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
		//$("#count").text(idsList.length);
    });
    
    $(document).on('ifChecked', '.childCheckbox', function() {
    	$(this).attr("checked","checked"); 
		$(this).parent().addClass("checked");
		var id=$(this).val();
		idsList.length=0;
		idsMap.set(id,id);
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
		
		var checkCount=0;
		var totalCoun=0;
		$('.childCheckbox').each(function(i, d){
			totalCoun++;
		})
		$('.checked').each(function(i, d){
			checkCount++;
		})
		if(checkCount==totalCoun){
			$('.select_all').children().addClass("checked");
			$('.select_all').children().children().attr("checked","checked"); 
		}
		//$("#count").text(idsList.length);
    });
    
    $(document).on('ifUnchecked', '.childCheckbox', function() {
    	$(this).removeAttr("checked","checked"); 
		$(this).parent().removeClass("checked");
		var id=$(this).val();
		idsList.length=0;
		idsMap.delete(id);
		idsMap.forEach(function (element, index, array) {
 		    // element: 指向当前元素的值
 		    // index: 指向当前索引
 		    // array: 指向Array对象本身modelIds
 			 idsList.push(element);
 		});
		$('.select_all').children().removeClass("checked"); 
		$('.select_all').children().children().removeAttr("checked"); 
		
		//$("#count").text(idsList.length);
    });
    
    var path = "<%=path%>";
    var myDataTable;
    $(function(){
    	init();
    	
    	 //个人被选中
    	 $('#peopleAuth').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定 
			$("#departmentShow").show();
     		$('#peopleAuth').iCheck('check');
   		$('#departmentAuth').iCheck('uncheck');
    	 }); 		
    	  
    	 //部门被选中
    	 $('#departmentAuth').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定 
    		$("#departmentShow").hide();
     		$('#departmentAuth').iCheck('check');
   		$('#peopleAuth').iCheck('uncheck');
    	 }); 	
    });
    
    function init(){
    	myDataTable = dataTable();
    }
    
    function func_dataTableReload(){
    	myDataTable.ajax.reload();
    }
    
    
    function dataTable(){
    	return $('#mydataTable').DataTable({
    		processing: true,
    		ordering: false,
    		searching: false,
    		info: true,
    		autoWidth: true,
    		lengthChange: false,
    		"order": [[ 2, "desc" ]],
    	    language: {
    	    	emptyTable: '<div id="content_empty"  class="form-group white-bg" style="text-align:center;padding:200px 0;margin:0;">   <p>暂无点击数据</p></div>',
    	    	info: '从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录',
    			infoEmpty: '没有数据',
    			lengthMenu: '每页显示 _MENU_ 条记录',
    			loadingRecords: '正在加载数据....',
    			processing: '正在处理数据....',
    			zeroRecords: '没有找到匹配的记录',
    			paginate: {
    				first: '首页',
    				previous: '前页',
    				next: '后页',
    				last: '尾页'
    			}
    	    },
    	    order: [[1,'desc']],
    		pageLength: 10,
    	    pagingType: 'full_numbers',
    	    columnDefs: [{
    			render: function(data, type, full) {
    					return '<div class="checkbox i-checks" style="margin-left:8px;"><label class="is_checkd"><input class="childCheckbox" type="checkbox" value="'+data+'"></label></div>';
                },
    			targets: 0
    			}],
    	    columns: func_columns(),
    	    serverSide: true,
    	    ajax: {
    	    	contentType: 'application/json;charset=utf-8',
    	    	type: 'POST',
    	    	url: func_AjaxUrl(),
    	    	data: function(d){
    	    		//d.cid=cid;
    	    		d.extra_search = func_ajaxData();
    				return JSON.stringify(d);
    			}
    		},"initComplete": function(settings, json) {
    	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
    	    }
    	}).on( 'draw', function () {
    		//不加这段查询后复选框会有问题
    		$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
    		$('.select_all').children().removeClass("checked"); 
    		$('.select_all').children().children().removeAttr("checked"); 
    		
    		var info=myDataTable.page.info(); 
        	//$('#count').html(info.recordsTotal);

    	} );
    	
    }
    
    function func_ajaxData() {
        var jsonObject = new Object();
         jsonObject.roleName = $("#searchRoleValue").val();
         return jsonObject;
    }
    
    function func_AjaxUrl(){
    	 return path+"/role/ajaxPageData"; 
    }
    /**		
     *	设置列名，对应后台
     */
    function func_columns(){
    	var jsonArr = [
    		{"data":"id"},
    		{"data":"name"},
    		{"data":"description"},
    	];
    	return jsonArr;
    }
    
    //搜索角色
    function searchRole(){
        func_dataTableReload();	
    }
    
    //获取父页面选择的全部用户编码，子页面选择的全部角色id，直接入库
    function selectRoleOption(){
    	if(idsList.length > 10){
	    	promptDialog("所选角色请勿超过10个！");
    	}else{
        	$("#roleSelectDiv").html('');
        	var idsListName =  [];
    		 var url="<%=path%>/role/ajaxRoleList";
             $.post(url, {
    	    	 }, function(data) {
    	    		var realData = data.data;
    	    		if (data.status == 200) {
    	    			for(var o=0;o<idsList.length;o++){
    	    			for(var i=0;i<realData.length;i++){
    	    					if(realData[i].id == idsList[o]){
    	    						idsListName.push(realData[i].name);
    	    						continue;
    	    				}
    	    			}
    	    			}
    	    		}
    	    	}); 
        	
     		var html = "";
    		for(var i=0;i<idsListName.length;i++){
    			html += '<div id=rediv'+idsList[i]+' style="padding:5px;margin-left:5px;color:#FFFFFF;background-color:#B8C9E8;display:inline-block;width: auto;height:auto;border-radius:5px 5px 5px 5px;">';
    			html += "<span>"+idsListName[i]+"</span>"
    			html += "<a class='close-link' onclick='deleteRoleDiv(\""+idsList[i]+"\")'><i style='color:#FFFFFF;' class='fa fa-times'></i></a>";
    			html += '</div>';
    		}
    		$("#roleSelectDiv").html(html); 
    		$("#role_modal").modal("hide");
    	}
    	
   	 	//重新绑定一下部门、个人按钮，不然会出现on事件失效的问题
   		 checkRadioInit();
    }
    


    
    </script>
</body>
</html>
